import React,{ Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/legend';

import './Chart.scss';

export default class Chart extends Component{
	constructor (props) {
		super(props)
		this.state = {
			nowType: 1
		}
	}
  drawChart (myChart, form) {
    if (form.type === 'line') {
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: form.time
        },
        grid: {
          left: '16%',
          right: '5%',
          bottom: 30,
          top: 20
        }, 
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(250,245,242,1)'
            }
          }
        },
        symbolSize: 20,
        itemStyle: {
          borderWidth: 1,
          color: '#FF5F17'
        },
        series: [{
          data: form.data,
          type: 'line',
          smooth: true,
          symbolSize: 12,
          lineStyle: {
            width: 3,
            shadowColor: 'rgba(255,95,23,0.5)',
            shadowBlur: 10,
            shadowOffsetY: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FF5F17'
            }, {
              offset: 1,
              color: '#FEE1D4'
            }])
          },
          itemStyle: {
            borderWidth: 2
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#FEE1D4'
              }, {
                  offset: 1,
                  color: '#FFF'
              }])
            }
          }
        }]
      })
    } else {
      console.log(form.data)
      let data = [
        { name: '我', value: form.data ? form.data.for_me : 1},
        { name: '产品', value: form.data ? form.data.for_product : 1},
        { name: '公司', value: form.data ? form.data.for_company : 1}
      ]
      myChart.setOption({
        legend: {
          x: 'center',
          y: 'bottom',
          itemGap: 50,
          data: [
            { name: '我', icon: 'circle' },
            { name: '产品', icon: 'circle' },
            { name: '公司', icon: 'circle' }
          ]
        },
        color:['#FF5F17', '#FEAC2A', '#19D35D'],
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '40%'],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
  componentDidMount () {
    let myChart = echarts.init(document.getElementsByClassName(this.props.myclassName)[0])
    this.drawChart(myChart, this.props.data)
  }
  componentWillReceiveProps (nextProps) {
    let myChart = echarts.init(document.getElementsByClassName(nextProps.myclassName)[0])
    this.drawChart(myChart, nextProps)
  }
  render() {
    return (
      <div className='chart-group'>
        <div className="chart-title">
          {this.props.name}
        </div>
        <div className={this.props.myclassName}>
        </div>
      </div>
    )
  }
}